/* 默认样式 */
html,body{
    height: 100%;
}

*{
    margin: 0;
    padding: 0;
}

ul{
    list-style: none;
}

a{
    display: block;
    color: inherit;
    text-decoration: none;
}

img{
    display: block;
    width: 100%;
}


/* 因为这个后台页面有一大部分是一样的样式，所以写在这里 */
/* 在这里加上可以让侧边栏显示的样式 */
.ad-body{
    padding-left: 180px;
    position: relative;

    a:hover{
        color: inherit;
        text-decoration: none;
    }
}

/* 点击隐藏侧边栏的样式 */
.aside-hide{
    padding-left: 0;
    
    .ad-aside{
        display: none;
    }
}

/* 左边栏样式 */
.ad-aside{
    position: absolute;
    top: 0;
    left: 0;
    width: 180px;
    height: 100%;
    background-color: #b34f89;

    /* 最上边的logo */
    .ad-logo{
        height: 50px;
        line-height: 50px;
        font-size: 24px;
        color: #fff;
        text-align: center;
    }

    /* 用户模块 */
    .ad-user{
        padding: 20px;
        font-size: 16px;
        text-align: center;
        color: #fff;

        img{
            display: inline-block;
            width: 52px;
            border-radius: 50%;
        }
    }

    /* 下方的菜单部分 */
    .ad-menu{
        text-align: center;

        li{
            margin-top: 15px;
            font-size: 18px;
            color: #92caf1;

            >.child{
                display: block;
                padding-top: 8px;
            }
        }

        .active{
            background-color: rgb(41, 34, 143);
            border-left: rgb(234, 236, 95);
        }
    }
}


/* 右边的主要内容部分 */
.ad-section{
    height: 100%;

    /* 顶部导航 */
    .ad-nav{
        height: 50px;
        line-height: 50px;
        padding-left: 15px;
        padding-right: 15px;
        background-color: rgb(113, 58, 134);

        >a{
            color: rgb(238, 234, 23);
            font-size: 20px;
        }
    }

    /* 路径导航部分 */
    .ad-container{
        .breadcrumb{
            font-size: 18px;
        }
    }
}
